<template>
    <div class="app-container">
        <div class='container'>
        <el-row class='btn'>
            <el-button @click='createPdf'>打印值日表</el-button>
            <el-button @click='editeTable'>编辑</el-button>
        </el-row>
        <div class="box">
                <div class='content' id='pdf-wrap'>
                    <div class='table' v-cloak style="font-size: 14px;box-sizing:border-box;width:100%;text-align:center;">
                        <table class='dialogTable' align="left" style="text-align:center;width: 100%;border-top:1px solid #ccc; border-left:1px solid #ccc;" cellpadding="0" cellspacing="0" >
                            <tr style="background:#f7f7f7;text-align:center;height:70px;box-sizing:border-box;">
                                <th style="width:12%;text-align:center;border-right:1px solid #ccc;border-bottom:1px solid #ccc;height:70px;box-sizing:border-box;">星期</th><th style="text-align:center;border-right:1px solid #ccc;border-bottom:1px solid #ccc;height:70px;box-sizing:border-box;">值日学生</th>
                            </tr>
                            <tr v-for='(data,index) in dataApply' :key="index" style="text-align:center;height:70px;">
                                <td style="background:#f7f7f7;text-align:center;border-right:1px solid #ccc;border-bottom:1px solid #ccc;height:70px;box-sizing:border-box;">{{data.date}}</td>
                                <td style="text-align:center;border-right:1px solid #ccc;border-bottom:1px solid #ccc;height:70px;box-sizing:border-box;">
                                    {{data.value || '--'}}
                                </td>
                            </tr>
                        </table>
                    </div>

                </div>
            </div>
        </div>
    </div>
</template>

<script>
export default{
    props: {
        dataList: {
            type: Array,
            default: null
        }
    },
    data() {
        return { 
            dataApply: ['', '', '', '', '', '', ''],
            date: ['周一', '周二', '周三', '周四', '周五', '周六', '周日']
        }
    },
    created() {
        // this.getDoStudent();//获取值日学生
    },
    methods: {
        // 打印课程表
        createPdf() {
            let newWindow = window.open('_blank');   // 打开新窗口
            let codestr = document.getElementById('pdf-wrap').innerHTML;   // 获取需要生成pdf页面的div代码
            newWindow.document.write(codestr);   // 向文档写入HTML表达式或者JavaScript代码
            newWindow.document.close();     // 关闭document的输出流, 显示选定的数据
            newWindow.print();   // 打印当前窗口
            return true;
        },
        // 向列表填充已有的值日列表
        getCheckDataApply(dataList) {
            this.dataApply=[];
            dataList.forEach((item, index) => {
                let obj = {
                    value: item,
                    date: this.date[index]
                }
                this.dataApply.push(obj)
            });
        },
        // 点击编辑
        editeTable() {
            this.$emit('madeEdite')
        }
    }
}
</script>

<style lang="scss" scoped>
.app-container {
    position: relative;
    .container{
        background:#fff;
        .appTitle{
            padding-top:8px;
            text-align: center;
            font-size: 18px;
            color: #333;
            line-height: 72px;
            // font-weight: bold;
            font-family: Microsoft YaHei;
            border-bottom: 1px solid #ddd;
        }
        .content{
            margin-top:30px;
            width:100%;
            position: relative;
        }
        .btn{
            margin-top:10px;
            // text-align: center;
        }
        .box{
            background:#fff;
        }
        .wrap-note{
            margin-top:20px;
            color:#999;
            font-size:14px;
        }
    }
    
}

</style>
